<script lang="ts" setup>
import { useWindowScroll } from '@vueuse/core';

const { y } = useWindowScroll({ behavior: 'smooth' });

function toTopHandler() {
	y.value = 0;
}
</script>

<template>
	<div class="bottom-10 right-[2%] w-9 h-9 origin-center fixed flex justify-center items-center">
		<button
			:class="y > 300?'active':''"
			class="toTop bg-primary"
			@click="toTopHandler"
		>
			<svg
				class="lucide lucide-arrow-up-from-line"
				fill="none"
				height="18"
				stroke="currentColor"
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				viewBox="0 0 24 24"
				width="18"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path d="m18 9-6-6-6 6" />
				<path d="M12 3v14" />
				<path d="M5 21h14" />
			</svg>
		</button>
	</div>
</template>

<style scoped>

</style>
